<script setup>
import {ref, watch} from "vue";
import { use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

use([TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer])

const option = ref({
  title: {  },
  tooltip: {},
  xAxis: {
    type: "category",
    data: [],
  },
  yAxis: {},
  series: [
    {
      type: "line",
      data: [],
    },
  ],
})

const props = defineProps({
  option: {
    type: Object,
    default: (() => {})
  }
})

watch(() => props.option, (val) => {
  if (val) {
    option.value.series[0].data = val.data.map((item) => item.value)
    option.value.xAxis.data = val.data.map((item) => item.name)
    console.log(option.value)
  }
}, {immediate: true})
</script>

<template>
  <v-chart :option="option" autoresize></v-chart>
</template>

<style scoped>

</style>